<template>
  <div class="grid gap-4 edgex-middle xl:grid-cols-3">
    <a-card>
      <EdgexPieChart />
    </a-card>
    <a-card class="map">
      <GDMap />
    </a-card>
    <a-card title="附近Edgex服务"
      ><template #extra><EdgexTag /></template>
      <EdgexList />
    </a-card>
  </div>
</template>

<script lang="ts">
import EdgexPieChart from "@/components/charts/EdgexPieChart.vue";
import GDMap from "@/components/map/GDMap.vue";
import EdgexTag from "@/components/tags/EdgexTag.vue";
import EdgexList from "@/components/lists/EdgexList.vue";
import { defineComponent } from "vue";

export default defineComponent({
  name: "EdgexMiddle",
  components: {
    EdgexPieChart,
    GDMap,
    EdgexTag,
    EdgexList,
  },
  setup() {
    return {};
  },
});
</script>

<style lang="scss">
.edgex-middle {
  .ant-card-body {
    height: 100%;
    width: 100%;
  }

  .map {
    .ant-card-body {
      padding: 0;
    }
  }
}
</style>
